<template>
	<view>
		<view class="friend" v-if="friendList.length">
			<view class="friend-list" v-for="(item,index) in friendList" :key='item.id' @click="to('/pages/MinePages/friend/main?id=' + item.id)">
				<image :src="item.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
				<view>{{item.nickName}}</view>
				<view class="btns" @click.stop="cancelFocus(item.id)">
					取消关注
				</view>
			</view>
		</view>
		<view v-else class="empty">暂无病友</view>
	</view>
</template>

<script>
	import {
		getMyFocusBuddyList,
		cancelFocus
	} from '@/apis/request.js'
	export default {
		data() {
			return {
				friendList: [],
				pageNo: 1,
				pageSize: 10,
			};
		},
		methods: {
			async getList() {
				let {
					records
				} = await getMyFocusBuddyList({
					pageNo: this.pageNo,
					pageSize: this.pageSize
				})
				this.friendList = records
			},
			cancelFocus(id) {
				const {
					id: userId
				} = uni.getStorageSync('userInfo')
				cancelFocus({
					attentionId: id,
					attentionType: 2,
					userId: userId
				})
				this.getList()
				this.$forceUpdate()
			},
			to(url) {
				uni.navigateTo({
					url
				});
			},
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.friend {
		.friend-list {
			display: flex;
			flex-direction: row;
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #F1F1F1;
			align-items: center;

			image {
				border-radius: 50%;
				height: 100rpx;
				width: 100rpx;
			}
			
			view {
				margin-left: 20rpx;
				flex: 1;
				font-size: 30rpx;
				color: #333333;
			}

			.btns {
				flex: none;
				width: 150rpx;
				height: 40rpx;
				font-size: 24rpx;
				border-radius: 20rpx;
				border: 1rpx solid #C0C0C0;
				color: #aaaaaa;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}
	
	.empty {
		width: 100%;
		height: 100vh;
		text-align: center;
		line-height: 100vh;
		color: #999999;
	}
</style>
